<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>全选和反选示例</title>
  <style>
  
  </style>
</head>

<body>
  <div id="app">
    <div>
      <span>全选</span>
      <input type="checkbox" v-model="isAll" />
      <button @click="reverseBtn">反选</button>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <input type="checkbox" v-model="item.checked" /> {{item.name}}</li>
      </ul>
    </div>
  </div>

<script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          {
            name: "猪八戒",
            checked: false,
          },
          {
            name: "孙悟空",
            checked: false,
          },
          {
            name: "唐僧",
            checked: false,
          },
          {
            name: "白龙马",
            checked: false,
          },
        ],
      },
      computed: {
        isAll: {
          get() {
            return this.list.every(item => item.checked)
          },
          set(newVal) {
            this.list.forEach(item => item.checked = newVal);
          },
        },
      },
      methods: {
        reverseBtn() {
          this.isAll = !this.isAll
        }
      }
    });
  </script>
</body>

</html>